import { FC } from "react";
import { Button, Menu, Space } from "@arco-design/web-react";
import { css } from "@emotion/css";

export const HealthReport: FC = () => {
  return (
    <div>
      <Space
        direction="horizontal"
        className={css`
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
        `}
      >
        <h3
          className={css`
            border-left: 3px solid rgb(var(--primary-6));
            padding-left: 12px;
            border-radius: 2px;
            margin-bottom: 30px;
          `}
        >
          健康报告
        </h3>

        <Menu
          mode="horizontal"
          className={css`
            width: 252px;
            text-align: right;
          `}
        >
          <Menu.Item key="1">按日</Menu.Item>
          <Menu.Item key="2">按周</Menu.Item>
          <Menu.Item key="3">按月</Menu.Item>
        </Menu>
      </Space>

      <div
        className={css`
          display: flex;
          justify-content: end;
        `}
      >
        <Button type="primary">导出</Button>
      </div>
    </div>
  );
};
